<template>
	<view class="body">
		
		
		<!-- 头部开始 -->
		<view class="header">
			<!-- 搜索栏开始 -->
			<!-- <u-search placeholder="搜索你感兴趣的商品" :show-action="false" :disabled="true" @click="searchAction" ></u-search> -->
			<view style=" width: 94%;z-index: 1;margin-right: 10px;" @click="searchAction"  > 
				<u-search  placeholder="搜索你感兴趣的商品" :show-action="false" :disabled="true"  ></u-search>
			</view>
			<!-- 搜索栏结束 -->
			<!-- 消息按钮开始 -->
			<view>
				<u-icon name="bell" size="50" @click="notice" ></u-icon>
			</view>
			<!-- 消息按钮结束 -->
		</view>
		<!-- 头部结束 -->
		
		<!-- 轮播图开始 -->
		<view class="swipe" >
			<u-swiper class="swiper-view" height="400" mode="dot"  :list="swiperList" @click="swipeDetail" ></u-swiper>
		</view>
		
		<!-- 轮播图结束 -->
	
		<!-- 分类开始 -->
		<view >
			<u-tabs name="store_cats" :list="tabList" :show-bar="false" active-color="#000" :current="currentTab" @change="changeTab" ></u-tabs>
		</view>
		<!-- 分类结束 -->
		
		
		<!-- 空白占位开始 -->
		<view class="blank" ></view>
		<!-- 空白占位结束 -->
		
		<!-- 分类精选开始 -->
		<view class="cate-view" >
			<view class="title">分类精选</view>
		
			<u-grid :col="4" :border="false" >
				<u-grid-item v-for="(item,index) in jingxuanList" :key="index" @click="clickStore(item)" >
					<image class="image" :src="item.store_log" ></image>
					<view class="text" >{{item.store_name}}</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!-- 分类精选结束 -->
		
		<!-- 猜你喜欢开始 -->
		<guess-view class="guess" :tabList="storeList" @clickStore="clickStore" ></guess-view>
		<!-- 猜你喜欢结束-->
		
	</view>
</template>

<script>
	
	import guessView from '@/components/guess.vue'
	
	export default{
		
		components:{
			"guess-view": guessView
		},
		data(){
			return{
				swiperList: [],//轮播图的数据
				tabList: [],
				storeList: [],
				jingxuanList: [],
				currentTab: 0   ,//当前点击tab的下标
				selectStore: [],	 //精选店铺订单
				//设置默认的分享参数
				share:{
					title:'奇克商城',
					path:'/pages/Index/index',
					imageUrl:'',
					desc:'',
					content:''
				}
			}
		},
		onLoad() {
			this.getHomeConfig()
			this.getTabList()
			this.getClassifyList()
			this.getList()
		},
		methods:{
			
			getHomeConfig(){  //轮播图
				this.$https.Index.getHomePage().then(req => {
					this.swiperList = req
				})
			},
			getTabList(){ //店铺分类
	
				this.$https.Index.getStoreType().then(req => {
					this.tabList = req
				})
			},
			
			storeData(){
				this.$https.Classification.storeList(1,"",true,4).then(req => {
					this.jingxuanList = req.data
				})
			},
			getClassifyList(){  //猜你喜欢的店铺
				this.$https.Index.getClassifyStore().then(req => {
					this.storeList = req
				})
			},
			getList(){  //精选店铺
				this.$https.Index.getStoreList(1).then(req => {
					this.selectStore = req.data
				})
			},
		
			tabClick(){
				console.log('点击中66666',this.currentTab)
				//跳转到店铺列表页
				uni.navigateTo({
					url: '../Classification/searchList'
				})
			},
			changeTab(e){  //tab点击
				this.currentTab = e;
				getApp().globalData.showDialog = String(e);
				uni.switchTab({
				    url:'/pages/Classification/sort'
				});
			},
			searchAction(){  //搜索款点击时的Action
				console.log('点击搜索框')
				
				uni.navigateTo({
					url: './search'
				})
			},
			notice(){
				
				if(uni.getStorageSync('token')){
					uni.navigateTo({
						url: './notice'
					})
				}else{
					uni.reLaunch({
						url: '../Mine/login/login'
					})
				}
				
			},
			clickStore(item){
				uni.navigateTo({
					url: "../Store/storeGoods?data="+JSON.stringify(item)
				})
			},
			swipeDetail(e){  //轮播图点击Action
				
				const item = this.swiperList[e]
				console.log('获取点击轮播图的数据',item)
				if(item){
					uni.navigateTo({
						url: "../Store/storeGoods"
					})
				}
			}
		}
	}
	
</script>

<style lang="scss" >
	
	page,.body{
		
		width: 100%;
		height: 100%;
	}
	
	.body{
		background-color: rgb(250,250,250);
	}
	
	.header{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		
		padding: 0 30rpx;
		
		height: 120rpx;
		width: 100%;
		
		background-color: #FFFFFF;
		
		.u-search{
			
			padding-right: 20rpx;
		}
	}
	
	.swipe{
		
		margin: 0 20rpx;
		width: 95%;
		background-color: #FFFFFF;
		
		.swiper-view{
			margin: 10rpx 0 20rpx 0;
			
		}
	}
	
	
	.u-tabs{
		margin-top: 10rpx;
	}
	
	.blank{
		height: 20rpx;
		background-color: rgb(250,250,250);
	}
	
	.cate-view{
		
		padding: 20rpx 20rpx 14rpx;
		
		width: 100%;
		
		background-color: #FFFFFF;
		
		.title{
			font-size: 32rpx;
		}
		
		.u-grid{
			margin: 0;
			width: 100%;
			
			.text{
				font-size: $uni-font-size-sm;
				color: $uni-color-error;
			}
		}
		
		.image{
			
			padding-bottom: 14rpx;
			
			width: 80%;
			height: 160rpx;
		}
	}
	
	.guess{
		width: 100%;
		height: 100%;
	}
	
</style>
